<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>5G+VR全景体验</title>
  <meta name="description" content="5G+VR全景体验 - VR物联网应用">
  <!-- 引入A-Frame核心库 -->
  <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
  <!-- 引入A-Frame陀螺仪控制组件 -->
  <script src="https://rawgit.com/rdub80/aframe-extras/master/dist/aframe-extras.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial, sans-serif;
      overflow: hidden;
      height: 100vh;
      width: 100vw;
      background-color: #000;
    }
    
    #back-button {
      position: fixed;
      top: 20px;
      left: 20px;
      width: 50px;
      height: 50px;
      background-color: rgba(255, 255, 255, 0.8);
      border: none;
      border-radius: 50%;
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      user-select: none;
    }
    
    #back-button:hover {
      background-color: rgba(255, 255, 255, 1);
      transform: scale(1.1);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }
    
    #info-panel {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 15px 25px;
      border-radius: 8px;
      font-size: 14px;
      z-index: 9998;
      max-width: 90%;
      text-align: center;
    }
    
    /* 陀螺仪提示 */
    #gyro-notice {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 20px;
      border-radius: 10px;
      font-size: 16px;
      text-align: center;
      z-index: 9997;
      display: none;
    }
    
    /* 热点样式 - A-Frame内部样式 */
    .hotspot {
      cursor: pointer;
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 0.8;
      }
      50% {
        transform: scale(1.2);
        opacity: 1;
      }
      100% {
        transform: scale(1);
        opacity: 0.8;
      }
    }
  </style>
</head>
<body>
  <button id="back-button" title="返回">←</button>
  <div id="info-panel">使用鼠标拖动查看全景 | 移动设备可旋转查看 | 注意：设备传感器需要HTTPS环境</div>
  <div id="gyro-notice">请点击屏幕允许设备方向访问</div>
  
  <!-- A-Frame VR场景 -->
  <a-scene id="vr-scene" vr-mode-ui="enabled: true" antialias="true">
    <!-- 全景背景 -->
    <a-sky id="panorama-sky" src="puydesancy.jpg" rotation="0 0 0"></a-sky>
    
    <!-- 热点交互元素 -->
    <a-entity 
      id="hotspot-1" 
      class="hotspot"
      geometry="primitive: sphere; radius: 0.5"
      material="color: #0066ff; opacity: 0.8; transparent: true"
      position="-5 0 -20"
      data-info="智能客厅"
      cursor-listener
    ></a-entity>
    
    <!-- 文字标签 -->
    <a-entity
      id="text-label"
      position="-10 0 -30"
      text="value: 5G+VR全景体验; color: white; align: center; baseline: center; font: 200 2em sans-serif; wrapCount: 15"
    ></a-entity>
    
    <!-- 相机和控制器 -->
    <a-camera id="main-camera" look-controls-enabled="true" wasd-controls-enabled="true">
      <a-cursor 
        id="cursor"
        color="#0066ff"
        fuse="true"
        fuse-timeout="500"
        rayOrigin="mouse"
      ></a-cursor>
    </a-camera>
    
    <!-- 设备方向控制 -->
    <a-entity device-orientation-permission-ui rotation-reader></a-entity>
  </a-scene>
  
  <script>
    // 返回按钮点击事件
    document.getElementById('back-button').addEventListener('click', function() {
      console.log('点击返回按钮，返回发现页面');
      window.location.href = '/plugin/discovery/index.html';
    });
    
    // 键盘事件监听
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape' || e.key === 'Backspace') {
        console.log('按下退出键，返回发现页面');
        window.location.href = '/plugin/discovery/index.html';
      }
    });
    
    // 初始化变量
    const infoPanel = document.getElementById('info-panel');
    const gyroNotice = document.getElementById('gyro-notice');
    let isGyroEnabled = false;
    
    // 检测安全上下文（HTTPS或localhost）
    function checkSecureContext() {
      if (!window.isSecureContext && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
        console.warn('设备传感器需要HTTPS环境或本地开发环境');
        infoPanel.textContent += ' | 当前环境可能无法使用陀螺仪';
      }
    }
    
    // 检查设备是否支持设备方向传感器
    function checkDeviceOrientationSupport() {
      if (!('DeviceOrientationEvent' in window)) {
        console.warn('当前浏览器不支持设备方向传感器');
        return false;
      }
      return true;
    }
    
    // 请求设备方向权限
    function requestDeviceOrientationPermission() {
      if (!checkDeviceOrientationSupport()) return;
      
      // 在iOS 13+上，需要用户交互才能请求权限
      if (typeof DeviceOrientationEvent.requestPermission === 'function') {
        console.log('请求设备方向权限...');
        gyroNotice.style.display = 'block';
        
        document.body.addEventListener('click', handlePermissionRequest, { once: true });
        document.body.addEventListener('touchstart', handlePermissionRequest, { once: true });
      } else {
        // 其他浏览器可能会自动授予权限
        console.log('设备方向权限可能已自动授予');
        enableGyroscope();
      }
    }
    
    // 处理权限请求
    function handlePermissionRequest() {
      gyroNotice.style.display = 'none';
      
      if (typeof DeviceOrientationEvent.requestPermission === 'function') {
        DeviceOrientationEvent.requestPermission()
          .then(permissionState => {
            if (permissionState === 'granted') {
              console.log('设备方向权限已授予');
              enableGyroscope();
              // 启用A-Frame的设备方向控制
              const scene = document.querySelector('a-scene');
              scene.setAttribute('device-orientation-permission-ui', 'enabled: true');
            } else {
              console.warn('设备方向权限被拒绝');
            }
          })
          .catch(error => {
            console.error('请求设备方向权限时出错:', error);
          });
      }
    }
    
    // 启用陀螺仪控制
    function enableGyroscope() {
      if (isGyroEnabled) return;
      
      isGyroEnabled = true;
      console.log('启用陀螺仪控制');
      
      // 启用相机的设备方向控制
      const camera = document.getElementById('main-camera');
      camera.setAttribute('look-controls', 'enabled', 'true');
    }
    
    // 热点点击事件处理
    AFRAME.registerComponent('cursor-listener', {
      init: function() {
        this.el.addEventListener('click', function(evt) {
          console.log('点击热点:', this.dataset.info);
          alert(`热点信息: ${this.dataset.info}`);
        });
        
        // 添加悬停效果
        this.el.addEventListener('mouseenter', function(evt) {
          this.setAttribute('scale', '1.2 1.2 1.2');
        });
        
        this.el.addEventListener('mouseleave', function(evt) {
          this.setAttribute('scale', '1 1 1');
        });
      }
    });
    
    // 设备方向权限UI组件
    AFRAME.registerComponent('device-orientation-permission-ui', {
      schema: {
        enabled: { default: true }
      },
      init: function() {
        if (this.data.enabled) {
          this.requestPermission();
        }
      },
      requestPermission: function() {
        requestDeviceOrientationPermission();
      }
    });
    
    // 旋转监听组件
    AFRAME.registerComponent('rotation-reader', {
      tick: function() {
        const rotation = this.el.getAttribute('rotation');
        if (rotation) {
          // 可以在这里处理旋转事件
        }
      }
    });
    
    // 场景加载完成事件
    document.querySelector('a-scene').addEventListener('loaded', function() {
      console.log('VR场景加载完成');
      
      // 检查安全上下文
      checkSecureContext();
      
      // 尝试请求设备方向权限
      if (typeof DeviceOrientationEvent.requestPermission === 'function') {
        // 等待用户交互后再请求权限
        console.log('请点击屏幕以启用VR功能');
      } else {
        enableGyroscope();
      }
    });
    
    // 窗口大小变化时处理
    window.addEventListener('resize', function() {
      const scene = document.querySelector('a-scene');
      if (scene && scene.renderer) {
        scene.renderer.setSize(window.innerWidth, window.innerHeight);
      }
    });
    
    // 清理函数，防止内存泄漏
    window.addEventListener('beforeunload', function() {
      // A-Frame会自动清理大部分资源
      console.log('清理VR资源');
    });
  </script>
</body>
</html>
